import { Input, Button, List } from 'antd'
import React from 'react';

/**
 * 无状态组件
 */
const TodoListUi = (props) => { 
    return ( 
        <div style={{paddingTop:'10%'}}>
            <div className="example-input">
                <Input size="large" value={props.inputValue} placeholder={props.inputValue} onChange={props.changeInputValue}/>
                <Button size="large" type="primary" onClick={props.addItem}>增加</Button>
            </div>
            <div className="list">
                <List
                    bordered
                    dataSource={props.list}
                    renderItem={(item,index) => (
                        <List.Item onClick={()=>{props.delItem(index)}}>{item}</List.Item>
                    )}
                />
            </div>
        </div>
        );
}
 
export default TodoListUi;